<template>
  <view class="archive">
    <!-- 头部 -->
    <view class="visit-header">
      <view class="visit-search-input-box">
        <view class="visit-search-input-icon">
          <image src="/static/visit/search.png"></image>
        </view>
        <input
          class="visit-search-input"
          type="text"
          placeholder="请输入患者姓名/身份证号/手机号"
          confirm-type="search"
          v-model="Listform.text"
        />
      </view>
      <view style="height: 32rpx" class="visit-search-button">
        <button
          @tap="search"
          style="height: 100%; line-height: 32rpx"
          type="primary"
          class="visit-button"
        >
          搜索体检记录
        </button>
      </view>
      <view class="visit-search-text">
        <text class="visit-search-text-title">已有记录：{{ total }}</text>
      </view>
      <view class="visit-search-text">
        <text class="visit-search-text-title">筛选人数：{{ searchnum }}</text>
      </view>
    </view>
    <!-- 列表 -->
    <view class="visit-body">
      <scroll-view class="visit-patient-list" scroll-y :show-scrollbar="false">
        <view class="visit-patient-box">
          <view
            @tap="checkdetail(item)"
            class="visit-patient-item"
            v-for="item in patientList"
            :key="item.id"
          >
            <view>
              <view class="visit-patient-item-header"></view>
              <view
                class="firstrow-item"
                style="font-weight: bold; font-size: 14rpx; padding: 0 14rpx"
                >姓名：{{ item.name }}
              </view>
              <view class="visit-patient-item-firstrow">
                <view class="firstrow-item">年龄：{{ item.age }}</view>
                <view
                  v-if="item.sign != null"
                  style="
                    font-size: 11rpx;
                    border-radius: 2rpx;
                    color: #1ab1ff;
                    border: 1rpx solid #1ab1ff;
                  "
                  >已签约</view
                >
                <view
                  v-else
                  style="
                    font-size: 11rpx;
                    border-radius: 2rpx;
                    color: #f39e0a;
                    border: 1rpx solid #f39e0a;
                  "
                  >未签约</view
                >
              </view>
              <view class="visit-patient-item-firstrow">
                <view class="firstrow-item" style="width: 50rpx">性别：{{ item.sex }}</view>
                <view class="firstrow-item" style="flex: 1; width: 150rpx"
                  >人群：{{ item.disease }}
                </view>
              </view>
              <view class="visit-patient-item-secondrow">
                <view class="firstrow-item">身份证：{{ item.idNumber }}</view>
              </view>
              <view class="visit-patient-item-secondrow">
                <view class="firstrow-item">地址：{{ item.address }}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getPetientbydoc } from '@/services/check'
import { useMemberStore } from '@/stores/index'
const MemberStore = useMemberStore()
const Listform = ref({
  page: 1,
  pageSize: 100,
  text: '',
  doctorId: MemberStore.profile.doctorInfo.id,
})
const patientList = ref([])
const total = ref(0)
const searchnum = ref(0)
const getPatentlist = async () => {
  const res = await getPetientbydoc(Listform.value)
  patientList.value = res.data.filter((item) => {
    return item.sign === 1
  })
  total.value = patientList.value.length
}
const search = async () => {
  const res = await getPetientbydoc(Listform.value)
  patientList.value = []
  patientList.value = res.data.filter((item) => {
    return item.sign === 1
  })
  searchnum.value = patientList.value.length
}
//点击体检项
const checkdetail = (item: any) => {
  uni.navigateTo({ url: `/pages/checklist/checklist?params=${JSON.stringify(item)}` })
}
onLoad(() => {
  getPatentlist()
})
onShow(() => {
  Listform.value.text = ''
  getPatentlist()
})
</script>

<style scoped lang="scss">
.archive {
  background-color: #f4f4f4;
}
.visit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15rpx;
  padding: 0 10rpx;
  width: 100%;
  height: 45rpx;
  background-color: #fff;
  .visit-search-input-box {
    display: flex;
    align-items: center;
    height: 32rpx;
    width: 300rpx;
    padding: 0 20rpx;
    background-color: #f5f5f5;
    border-radius: 5rpx;
    .visit-search-input-icon {
      width: 15rpx;
      height: 15rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10rpx;
    }
    .visit-search-input {
      flex: 1;
      border: none;
      outline: none;
      background-color: transparent;
      width: 100%;
      height: 100%;
    }
    image {
      width: 13rpx;
      height: 13rpx;
    }
  }
  .visit-search-text {
    font-size: 12rpx;
    .visit-search-text-title {
      color: #61666d;
    }
    .visit-search-text-num {
      color: #333333;
    }
  }
  .visit-search-fliter {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 5rpx;
    image {
      width: 18rpx;
      height: 18rpx;
      margin-right: 6rpx;
    }
    text {
      font-size: 13rpx;
      color: #333333;
    }
  }
}
.visit-body {
  width: 100%;
  height: calc(100vh - 105rpx);
  margin-top: 10rpx;
  overflow: auto;
  padding: 0 15rpx;
  .visit-patient-list {
    width: 100%;
    .visit-patient-box {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      .visit-patient-item {
        background-color: #fff;
        height: 120rpx;
        width: 200rpx;
        padding: 0rpx 0;
        border-radius: 5rpx;
        margin: 5rpx 2rpx;
        .visit-patient-item-header {
          width: 100%;
          height: 8rpx;
          background-color: #06d9f5;
          background: #fff radial-gradient(#06dbf5, #02abf3);
          border-radius: 5rpx;
        }
        .visit-patient-item-firstrow {
          margin-top: 6rpx;
          padding: 0 14rpx;
          display: flex;
          justify-content: space-between;
          .firstrow-item {
            display: flex;
            color: #61666d;
            font-size: 11rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
            .patient-tag {
              width: 55rpx;
              border: 1rpx solid #61666d;
              padding: 0 3rpx;
              border-radius: 2rpx;
              height: 15rpx;
              overflow: hidden;
            }
          }
        }
        .visit-patient-item-secondrow {
          width: 100%;
          margin-top: 6rpx;
          padding: 0 14rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          -webkit-box-orient: vertical;
          .firstrow-item {
            color: #61666d;
            font-size: 11rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
      }
      .visit-patient-item-text {
        font-size: 12rpx;
        color: #333333;
      }
    }
  }
}
.visit-button {
  background-color: #06d9f5;
  background: #fff radial-gradient(#06dbf5, #02abf3);
}
</style>
